<template>
  <div class="order-detail">
    <el-card shadow="never">
      <el-steps :active="active" align-center>
        <el-step v-for="item in stepArray" :key="item.value" :title="item.name" :description="item.time" />
      </el-steps>

      <h3>基础信息</h3>
      <div class="order-info">
        <div class="info-title">
          订单信息
        </div>

        <div class="infor-container">
          <el-row v-if="orderDetail.orderInfo && Object.keys(orderDetail.orderInfo).length > 0" :gutter="20">
            <el-col :span="8"><div class="grid-content">订单编号：{{ orderDetail.orderInfo.orderNo }}</div></el-col>
            <el-col :span="8"><div class="grid-content">订单类型：{{ orderDetail.requestOrderInfo.orderCategoryName }}</div></el-col>
            <el-col :span="8"><div class="grid-content">订单单价： {{ orderDetail.requestOrderInfo.requestOrderPrice }}</div></el-col>
            <el-col :span="8"><div class="grid-content">创建时间： {{ orderDetail.orderInfo.gmtCreate ? formatTimes(orderDetail.orderInfo.gmtCreate,"YYYY/MM/DD hh:mm:ss") : '' }}</div></el-col>
            <el-col :span="8"><div class="grid-content">完成时间： {{ orderDetail.requestOrderInfo.gmtFinish ? formatTimes(orderDetail.requestOrderInfo.gmtFinish,"YYYY/MM/DD hh:mm:ss") : '' }}</div></el-col>
          </el-row>
        </div>
        <div class="info-title">
          需求单信息
        </div>
        <div class="infor-container">
          <el-row v-if="orderDetail.requestOrderInfo && Object.keys(orderDetail.requestOrderInfo).length > 0" :gutter="20">
            <el-col :span="8"><div class="grid-content">需求单编号： {{ orderDetail.requestOrderInfo.requestOrderNo }}</div></el-col>
            <!-- <el-col :span="8"><div class="grid-content">供应商： {{ orderDetail.requestOrderInfo.requestOrderProvider }}</div></el-col> -->
            <el-col :span="8"><div class="grid-content">下单时间： {{ orderDetail.requestOrderInfo.gmtCreate ? formatTimes(orderDetail.requestOrderInfo.gmtCreate,"YYYY/MM/DD hh:mm:ss") : '' }}</div></el-col>
          </el-row>
        </div>
        <div class="info-title">
          用户信息
        </div>
        <div class="infor-container">
          <el-row v-if="orderDetail.userInfo && Object.keys(orderDetail.userInfo).length > 0" :gutter="20">
            <el-col :span="8"><div class="grid-content">用户名称： {{ orderDetail.userInfo.userName }}</div></el-col>
            <el-col :span="8"><div class="grid-content">联系方式： {{ orderDetail.userInfo.userPhone }}</div></el-col>
            <el-col :span="8"><div class="grid-content">用户地址： {{ orderDetail.userInfo.userAddress }}</div></el-col>
          </el-row>
        </div>
        <div class="info-title">
          师傅信息
        </div>
        <div class="infor-container">
          <el-row v-if="orderDetail.workerInfo && Object.keys(orderDetail.workerInfo).length > 0" :gutter="20">
            <el-col :span="8"><div class="grid-content">师傅名称： {{ orderDetail.workerInfo.workerName }}</div></el-col>
            <el-col :span="16"><div class="grid-content">联系方式： {{ orderDetail.workerInfo.workerPhone }}</div></el-col>
          </el-row>
        </div>
        <div class="info-title">
          服务信息
        </div>
        <el-table
          :data="orderDetail.attachInfo"
          stripe
          :header-cell-style="{background:'#f2f3f5',color:'#606266'}"
          class="table-data"
        >

          <el-table-column prop="title" label="预约时间" align="center" :show-overflow-tooltip="true" min-width="150" />
          <el-table-column prop="title" label="上门时间" align="center" :show-overflow-tooltip="true" min-width="150" />
          <el-table-column prop="title" label="施工图片" align="center" :show-overflow-tooltip="true" min-width="150">
            <template slot-scope="scope">
              <el-image
                style="width: 100px; height: 100px"
                :src="scope.row.url"
                fit="fill'"
              />
            </template>
          </el-table-column>
        </el-table>

        <!-- <div class="info-title">
          资金信息
        </div>
        <el-table
          :data="orderDetail.orderLogs"
          stripe

          :header-cell-style="{background:'#f2f3f5',color:'#606266'}"
          class="table-data"
        >
          <el-table-column prop="userName" label="应付款" align="center" :show-overflow-tooltip="true" min-width="150" />
          <el-table-column prop="afterStatus" label="服务费" align="center" :show-overflow-tooltip="true" min-width="150" />
          <el-table-column prop="remark" label="商家收入" align="center" :show-overflow-tooltip="true" min-width="150" />
          <el-table-column prop="operatedTime" label="平台收入" align="center" :show-overflow-tooltip="true" min-width="150" />
        </el-table> -->
      </div>
    </el-card>
  </div>
</template>

<script>
import { getOrderDetail } from '@/api/order'
import { formatTimes } from '@/utils'
export default {
  data() {
    return {
      formatTimes,
      active: 1,
      stepArray: [
        { name: '师傅接单', value: 1 },
        { name: '待签到', value: 2 },
        { name: '已抵达', value: 3 },
        { name: '服务完成', value: 4 }
      ],
      orderDetail: {}
    }
  },
  mounted() {
    this.getOrderDetail()
  },
  methods: {
    async getOrderDetail() {
      try {
        const res = await getOrderDetail({ id: this.$route.query.id })
        this.orderDetail = { ...res }
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.order-detail{
  .order-info{
    background: #FFFFFF;
    border: 1px solid #D9D9D9;
    padding-bottom: 30px;
    .info-title{
      background: #F2F3F6;
      padding: 10px 30px;
      font-weight: 600;
    }
    .infor-container{
      padding: 10px 40px;
      color: rgba(0, 0, 0, 0.65);
      font-size: 14px;
      font-weight: normal;
      .grid-content{
        padding: 15px 0px;
        font-size: 14px;
        color: #606266;
        font-weight: 500;
      }
    }
    .table-data{
      padding: 15px 0px;
    }
  }
}
</style>
